<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书馆座位预约系统 - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css " rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f0f8ff;
            min-height: 100vh;
            color: #333;
            display: flex;
            flex-direction: column;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            flex: 1;
        }

        /* 头部样式 */
        .main-header {
            background-color: rgba(255, 255, 255, 0.95);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 15px 0;
        }

        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1.5rem;
            font-weight: bold;
            color: #1a2a6c;
        }

        .logo i {
            font-size: 1.8rem;
        }

        .main-nav ul {
            display: flex;
            list-style: none;
            gap: 20px;
        }

        .main-nav a {
            text-decoration: none;
            color: #333;
            padding: 8px 15px;
            border-radius: 5px;
            transition: background-color 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .main-nav a:hover, .main-nav li.active a {
            background-color: #1a73e8;
            color: white;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .welcome {
            font-weight: 500;
        }

        .avatar i {
            font-size: 2rem;
            color: #1a73e8;
        }

        .btn-instruction {
            background: #34a853;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s;
            margin-right: 15px;
        }

        .btn-instruction:hover {
            background: #2e8b47;
        }

        /* 主要内容区域 */
        .main-content {
            flex: 1;
            padding: 20px 0;
        }

        .welcome-section {
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            padding: 30px;
            margin-bottom: 30px;
            text-align: center;
        }

        .welcome-section h2 {
            color: #1a2a6c;
            margin: 20px 0 15px 0;
            font-size: 1.8rem;
        }

        .welcome-section p {
            font-size: 1.2rem;
            color: #666;
            line-height: 1.8;
        }

        /* 顶部三卡片布局 */
        .top-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .top-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 25px;
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .top-card:hover {
            transform: translateY(-5px);
        }

        .top-card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .top-card h2 {
            margin: 0;
            font-size: 1.5rem;
            color: #1a2a6c;
        }

        .top-card-content {
            flex-grow: 1;
        }

        /* 场馆信息卡片内容 */
        .opening-hours {
            margin-bottom: 15px;
        }

        .opening-hours p {
            margin-bottom: 8px;
            display: flex;
            align-items: center;
        }

        .opening-hours i {
            margin-right: 10px;
            color: #666;
            width: 16px;
            text-align: center;
        }

        .hours-list {
            list-style: none;
            margin-top: 10px;
        }

        .hours-list li {
            padding: 5px 0;
            border-bottom: 1px solid #f5f5f5;
            display: flex;
            justify-content: space-between;
        }

        .hours-list li:last-child {
            border-bottom: none;
        }

        /* 临时闭馆通知卡片内容 */
        .notice-content {
            padding: 15px;
            background-color: #fff3cd;
            border-radius: 8px;
            border-left: 4px solid #f39c12;
            margin-top: 10px;
        }

        .notice-content p {
            margin-bottom: 10px;
            color: #856404;
        }

        .notice-content p:last-child {
            margin-bottom: 0;
        }

        /* 图书馆注意事项卡片内容 */
        .notice-list {
            list-style: none;
            margin-top: 10px;
        }

        .notice-list li {
            padding: 12px 0;
            border-bottom: 1px solid #f5f5f5;
            display: flex;
            align-items: center;
        }

        .notice-list li:last-child {
            border-bottom: none;
        }

        .notice-list i {
            margin-right: 15px;
            color: #e74c3c;
            width: 20px;
            text-align: center;
            font-size: 1.2rem;
        }

        .notice-list .icon-warning {
            color: #f39c12;
        }

        .notice-list .icon-info {
            color: #3498db;
        }

        /* 区域信息表格样式 */
        .area-table-section {
            margin-bottom: 40px;
        }

        .area-table-header {
            margin-bottom: 20px;
        }

        .area-table-header h2 {
            color: #1a2a6c;
            font-size: 1.8rem;
        }

        .area-table {
            width: 100%;
            border-collapse: collapse;
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .area-table th {
            background-color: #1a2a6c;
            color: white;
            padding: 15px;
            text-align: left;
            font-weight: 600;
        }

        .area-table td {
            padding: 15px;
            border-bottom: 1px solid #eee;
        }

        .area-table tr:last-child td {
            border-bottom: none;
        }

        .area-table tr:hover {
            background-color: #f8f9fa;
        }

        .area-icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            margin-right: 10px;
        }

        .area-name {
            display: flex;
            align-items: center;
        }

        .restriction {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 500;
        }

        .restriction.all {
            background-color: #e8f5e9;
            color: #2e7d32;
        }

        .restriction.limited {
            background-color: #fff3e0;
            color: #ef6c00;
        }


        /* 模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            overflow: auto;
        }

        .modal-content {
            background-color: white;
            margin: 5% auto;
            padding: 0;
            border-radius: 12px;
            width: 90%;
            max-width: 800px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            animation: modalFade 0.3s;
        }

        @keyframes modalFade {
            from {opacity: 0; transform: translateY(-50px);}
            to {opacity: 1; transform: translateY(0);}
        }

        .modal-header {
            background: #1a2a6c;
            color: white;
            padding: 20px;
            border-radius: 12px 12px 0 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h2 {
            margin: 0;
        }

        .close {
            color: white;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover {
            color: #ddd;
        }

        .modal-body {
            padding: 20px;
            max-height: 70vh;
            overflow-y: auto;
        }

        /* 标签页样式 */
        .tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
        }

        .tab {
            padding: 12px 20px;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            font-weight: 500;
        }

        .tab.active {
            border-bottom: 3px solid #1a73e8;
            color: #1a73e8;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .tip-section {
            margin-bottom: 30px;
        }

        .tip-section h3 {
            color: #1a2a6c;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .tip-list {
            list-style-type: none;
        }

        .tip-list li {
            padding: 10px 0;
            border-bottom: 1px solid #f5f5f5;
            display: flex;
            align-items: flex-start;
        }

        .tip-list li:before {
            content: "•";
            color: #1a73e8;
            font-weight: bold;
            margin-right: 10px;
        }

        .rule-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
        }

        .rule-card {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #1a73e8;
        }

        .rule-card h4 {
            margin-bottom: 10px;
            color: #1a2a6c;
        }

        @media (max-width: 768px) {
            .header-container {
                flex-direction: column;
                gap: 15px;
            }

            .main-nav ul {
                flex-wrap: wrap;
                justify-content: center;
            }

            .user-info {
                flex-direction: column;
                gap: 10px;
            }

            .top-cards {
                grid-template-columns: 1fr;
            }

            .area-table {
                display: block;
                overflow-x: auto;
            }

            .modal-content {
                width: 95%;
                margin: 10% auto;
            }

            .tabs {
                flex-wrap: wrap;
            }

            .rule-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
<header class="main-header">
    <div class="header-container">
        <div class="logo">
            <span>图书馆座位预约系统</span>
        </div>
        <nav class="main-nav">
            <ul>
                <li class="active"><a href="index.html">首页</a></li>
                <li><a href="seat-selection.html">座位选择</a></li>
                <li><a href="booking-management.html">预约管理</a></li>
                <li><a href="user-profile.html">个人中心</a></li>
            </ul>
        </nav>
        <div class="user-info">
            <button class="btn-instruction" id="btnInstruction">座位预约说明</button>
            <span class="welcome" id = "welcomeText">欢迎，加载中</span>
        </div>
    </div>
</header>

<main class="main-content">
    <div class="container">
        <!-- 欢迎信息 -->
        <section class="welcome-section">
            <marquee bgcolor="#f0f8ff" direction="left" scrollamount="15">
                <b><font face="黑体，楷体-GB2312" size="7" color="#00008b">
                    欢迎使用图书馆座位预约系统
                </font></b>
            </marquee>
            <h2>座位预约小贴士</h2>
            <p>使用要预约   预约要签到<br>
                离座要暂离   用完要退座
            </p>
        </section>

        <!-- 顶部三卡片布局 -->
        <div class="top-cards">
            <!-- 场馆信息卡片 -->
            <div class="top-card">
                <div class="top-card-header">
                    <h2>场馆开放时间</h2>
                </div>
                <div class="top-card-content">
                    <div class="opening-hours">
                        <ul class="hours-list">
                            <li><span>周一至周日:</span> <span>7:00 - 22:00</span></li>
                            <li><span>节假日:</span> <span>另行通知</span></li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 临时闭馆通知卡片 -->
            <div class="top-card">
                <div class="top-card-header">
                    <h2>通知</h2>
                </div>
                <div class="top-card-content">
                    <p>因设备维护，图书馆将于2025年10月25日（周六）全天闭馆，给您带来的不便敬请谅解。</p>
                </div>
            </div>

            <!-- 图书馆注意事项卡片 -->
            <div class="top-card">
                <div class="top-card-header">
                    <h2>图书馆注意事项</h2>
                </div>
                <div class="top-card-content">
                    <ul class="notice-list">
                        <li>图书馆内禁止吸烟</li>
                        <li>禁止在图书馆内接打电话，请保持安静</li>
                        <li>图书馆内禁止饮食</li>
                        <li>请妥善保管好个人物品</li>
                        <li>禁止占座，使用座位请预约</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 区域信息表格 -->
        <section class="area-table-section">
            <div class="area-table-header">
                <h2>区域信息说明</h2>
            </div>
            <table class="area-table">
                <thead>
                <tr>
                    <th>区域名称</th>
                    <th>座位数量</th>
                    <th>适用人群</th>
                    <th>功能说明</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        <div class="area-name">
                            阅览区
                        </div>
                    </td>
                    <td>400个</td>
                    <td><span class="restriction all">所有学生</span></td>
                    <td>为想要看书或自习的同学提供座位，保持安静的学习环境</td>
                </tr>
                <tr>
                    <td>
                        <div class="area-name">
                            电子阅览区
                        </div>
                    </td>
                    <td>600个</td>
                    <td><span class="restriction all">所有学生</span></td>
                    <td>提供电脑及其他电子设备，适合需要使用电子设备处理事务或听课的同学</td>
                </tr>
                <tr>
                    <td>
                        <div class="area-name">
                            考公考研区
                        </div>
                    </td>
                    <td>1000个</td>
                    <td><span class="restriction limited">大三、大四及研究生</span></td>
                    <td>专为考公考研同学设计的学习环境，仅限大三、大四及研究生预约</td>
                </tr>
                <tr>
                    <td>
                        <div class="area-name">
                            阅读区
                        </div>
                    </td>
                    <td>8个</td>
                    <td><span class="restriction all">所有学生</span></td>
                    <td>封闭式环境，避免打扰他人，适合需要深度阅读的同学</td>
                </tr>
                <tr>
                    <td>
                        <div class="area-name">
                            讨论区
                        </div>
                    </td>
                    <td>300个</td>
                    <td><span class="restriction all">所有学生</span></td>
                    <td>为有讨论需求的同学提供环境，可进行小组学习和交流</td>
                </tr>
                </tbody>
            </table>
        </section>
    </div>
</main>



<!-- 座位预约说明模态框 -->
<div id="instructionModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>座位预约说明</h2>
            <span class="close">&times;</span>
        </div>
        <div class="modal-body">
            <div class="tabs">
                <div class="tab active" data-tab="usage">使用流程</div>
                <div class="tab" data-tab="tips">预约小贴士</div>
                <div class="tab" data-tab="rules">预约规则</div>
                <div class="tab" data-tab="supervision">监督规则</div>
                <div class="tab" data-tab="violation">违规规则</div>
            </div>

            <div id="usage" class="tab-content active">
                <div class="tip-section">
                    <h3>座位预约</h3>
                    <ul class="tip-list">
                        <li><strong>预约选座：</strong>通过选择日期、时间、区域、座位进行预约，适用于有明确目标座位的预约情形。</li>
                        <li><strong>快速选座：</strong>首页"快速选座"按钮，设置筛选条件，系统会自动分配符合条件的座位给您，适用于"随遇而安"型的预约。</li>
                    </ul>
                </div>
                <div class="tip-section">
                    <h3>扫码签到</h3>
                    <ul class="tip-list">
                        <li>在预约开始时间的前30分钟和后30分钟内进行签到。</li>
                        <li>如果没有按时签到，将被记录为违约行为。</li>
                    </ul>
                </div>
                <div class="tip-section">
                    <h3>暂离</h3>
                    <ul class="tip-list">
                        <li>如使用过程中需要暂时离开座位，请点击首页当前预约卡片中的暂离按钮。</li>
                        <li>暂离时长为60分钟，您需要在规定时间内返回，并扫码落座。</li>
                        <li>在此期间内，您的座位将会受到保护。</li>
                    </ul>
                </div>
                <div class="tip-section">
                    <h3>退座</h3>
                    <ul class="tip-list">
                        <li>使用完毕后，在首页当前预约卡片，点击退座按钮。</li>
                        <li>退座后该座位将被释放，同时记录您成功履约一次。</li>
                        <li>如使用完毕后没有退座，将被记录为违约行为。</li>
                    </ul>
                </div>
            </div>

            <div id="tips" class="tab-content">
                <div class="tip-section">
                    <h3>座位预约小贴士</h3>
                    <ul class="tip-list">
                        <li><strong>使用要预约</strong> - 使用座位前请先进行预约</li>
                        <li><strong>预约要签到</strong> - 按时签到确认使用座位</li>
                        <li><strong>离座要暂离</strong> - 暂时离开请使用暂离功能</li>
                        <li><strong>用完要退座</strong> - 使用完毕请及时退座</li>
                    </ul>
                </div>
            </div>

            <div id="rules" class="tab-content">
                <div class="tip-section">
                    <h3>预约规则</h3>
                    <div class="rule-grid">
                        <div class="rule-card">
                            <h4>预约开始时间</h4>
                            <p>提前1天的 22:00</p>
                        </div>
                        <div class="rule-card">
                            <h4>单次预约时长</h4>
                            <p>不限制</p>
                        </div>
                        <div class="rule-card">
                            <h4>座位预留时长</h4>
                            <p>30分钟</p>
                        </div>
                        <div class="rule-card">
                            <h4>每日取消次数</h4>
                            <p>不限</p>
                        </div>
                        <div class="rule-card">
                            <h4>每周取消次数</h4>
                            <p>不限</p>
                        </div>
                        <div class="rule-card">
                            <h4>暂离时长</h4>
                            <p>60分钟</p>
                        </div>
                        <div class="rule-card">
                            <h4>监督时长</h4>
                            <p>30分钟</p>
                        </div>
                        <div class="rule-card">
                            <h4>用餐时段</h4>
                            <p>11:30至13:00<br>17:30至19:00</p>
                        </div>
                        <div class="rule-card">
                            <h4>用餐时段暂离</h4>
                            <p>可暂离90分钟</p>
                        </div>
                    </div>
                </div>
            </div>

            <div id="supervision" class="tab-content">
                <div class="tip-section">
                    <h3>监督规则</h3>
                    <ul class="tip-list">
                        <li>如您发现某个显示在使用中的座位实际无人就坐，可扫描座位二维码发起监督。</li>
                        <li>被监督人需要在30分钟内重新扫码落座或退座。</li>
                        <li>被监督人在监督时间内重新扫码落座，可继续使用座位。</li>
                        <li>被监督人在监督时间内退座，记为正常履约，并且座位释放。</li>
                        <li>被监督人在监督时间内未重新扫码落座或退座，记为一次违约，并且座位释放。</li>
                    </ul>
                </div>
            </div>

            <div id="violation" class="tab-content">
                <div class="tip-section">
                    <h3>违规规则</h3>
                    <ul class="tip-list">
                        <li>预约后没有在规定时间内签到，将被记录为违约。</li>
                        <li>使用完毕不退座记录为违约。</li>
                        <li>暂离时未在60分钟内返回扫码落座，将被记录为违约。</li>
                        <li>监督后未在30分钟内返回或退座，将被记录为违约。</li>
                        <li>每周违约次数达到3次，将暂停本周的预约功能。</li>
                    </ul>
                </div>
                <div class="tip-section">
                    <h3>约法三章</h3>
                    <ul class="tip-list">
                        <li>使用座位前请先进行预约，在预约时段内，预约人拥有该座位的使用权。请没有预约的同学将座位让给已经预约的同学。杜绝"霸座"现象从我做起。</li>
                        <li>禁止使用任何非正常手段进行签到等操作，否则暂停预约功能。</li>
                        <li>您的所有履约情况将被记录，请履约守信，点滴积累自己的信用记录。</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const BASE_URL = 'http://localhost:8080/api';

    /*  ---------------- 入口 ----------------  */
    document.addEventListener('DOMContentLoaded', () => {
        const user = sessionStorage.getItem('currentUser');
        if (!user) {
            alert('请先登录');
            location.href = 'login.html';
            return;
        }
        loadUserInfo(user);
        initModal();
        initTabs();
        initLogout();
    });

    /*  ---------------- 加载用户信息 ----------------  */
    async function loadUserInfo(username) {
        try {
            const res = await fetch(`${BASE_URL}/user/get-info?username=${username}`);
            if (!res.ok) throw new Error('网络异常');
            const student = await res.json();
            console.log('Student:', JSON.stringify(student, null, 2));
            document.getElementById('welcomeText').textContent = `欢迎，${student.username} 同学`;
        } catch (e) {
            console.error(e);
            alert('加载用户信息失败');
        }
    }

    /*  ---------------- 模态框 ----------------  */
    function initModal() {
        const modal   = document.getElementById('instructionModal');
        const btn     = document.getElementById('btnInstruction');
        const close   = document.querySelector('.close');

        btn.onclick   = () => modal.style.display = 'block';
        close.onclick = () => modal.style.display = 'none';
        window.onclick = e => { if (e.target === modal) modal.style.display = 'none'; };
    }

    /*  ---------------- 标签页 ----------------  */
    function initTabs() {
        document.querySelectorAll('.tab').forEach(tab =>
            tab.addEventListener('click', () => {
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
                tab.classList.add('active');
                document.getElementById(tab.dataset.tab).classList.add('active');
            })
        );
    }

    /*  ---------------- 退出登录 ----------------  */
    function initLogout() {
        document.querySelector('.avatar').addEventListener('click', () => {
            if (confirm('确定要退出登录吗？')) location.href = 'login.html';
        });
    }

    /*  ---------------- 区域跳转 ----------------  */
    function redirectToArea(area) {
        const map = {
            reading: 'reading-booking.html',
            electronic: 'electronic-booking.html',
            exam: 'exam-booking.html',
            'private-reading': 'private-reading-booking.html',
            discussion: 'discussion-booking.html'
        };
        map[area] ? location.href = map[area] : alert('区域选择错误');
    }
</script>
</body>
</html>